<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <style>
      #mapid {
        height: 500px;
      }
    </style>
  </head>

  <body>
    <div id="mapid"></div>
    <script>
      // 选择的地理坐标和缩放级别
      var mymap = L.map('mapid').setView([51.505, -0.09], 13)

      /*
       * 创建一个瓦片（Tile）图层
       * Leaflet不会为瓦片（Tile）强制选择一个特定的提供方
       */

      // 瓦片（Tile）图像设置 URL 模板
      L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        // 属性文本
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18, // 图层的最大缩放等级
        id: 'mapbox/streets-v11',
        // id: 'mapbox/satellite-v9',
        tileSize: 512,
        zoomOffset: -1, // 缩放值偏移 -1
        accessToken: 'pk.eyJ1IjoiaWZ1Y2t1IiwiYSI6ImNrd2xsbXF0MDIzYm4ydW5vYmxqeXB4emIifQ.JLK-zcFkS-nkMnfpzC92mw',
      }).addTo(mymap)
    </script>
  </body>
</html>
